<template>
  <div class="app-container">
    <el-card class="user-search">
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
        <el-form-item label="编号" prop="id">
          <el-input
            v-model="queryParams.id"
            placeholder="请输入用户编号"
            clearable
            size="small"
            onkeyup="this.value=this.value.replace(/\D/g,'')"
            onafterpaste="this.value=this.value.replace(/\D/g,'')"
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="queryParams.username"
            placeholder="请输入用户名"
            clearable
            size="small"
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="queryParams.email"
            placeholder="请输入用户邮箱"
            clearable
            size="small"
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input
            v-model="queryParams.phone"
            placeholder="请输入用户手机号"
            clearable
            onkeyup="this.value=this.value.replace(/\D/g,'')"
            onafterpaste="this.value=this.value.replace(/\D/g,'')"
            size="small"
            maxlength="11"
            style="width: 200px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="用户状态" clearable size="small" style="width: 200px">
            <el-option v-for="dict in statusOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- <el-button type="primary" @click="handleAddRole">New Role</el-button> -->

    <el-card style="width: 100%;margin-top:30px;">
      <span class="h3_title mb_16">用户列表</span>
      <el-row :gutter="10" class="mb8 fl_r" style="float:right;margin-right:20px">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增用户</el-button>
        </el-col>
      </el-row>
      <el-table :data="userList" style="margin-top:20px">
        <el-table-column align="center" label="编号" width="220">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户名" width="220">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column align="header-center" label="email">
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="手机号码" width="220">
          <template slot-scope="scope">
            {{ scope.row.phone }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="220">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.created_ts }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope)">修改</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.page_size"
        @pagination="getUserList"
      /> -->
    </el-card>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'编辑用户':'新增用户'"
      :before-close="handleClose"
      class="userDialog"
    >
      <el-form :model="userContent" label-width="100px" label-position="left">
        <el-form-item label="username">
          <el-input v-model="userContent.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="email">
          <el-input v-model="userContent.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="phone">
          <el-input v-model="userContent.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="status">
          <el-select v-model="userContent.status" placeholder="请选择">
            <el-option
              v-for="item in userStatus"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="created_ts">
          <el-date-picker
            v-model="userContent.created_ts"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="handelUserCancel">取消</el-button>
        <el-button type="primary" @click="confirmUser">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils'
export default {
  data() {
    return {
      userList: [],
      statusOptions: [],
      dialogVisible: false,
      dialogType: 'new',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      defaultUserList: [
        {
          id: '1',
          username: 'www',
          email: '113117441@qq.com',
          phone: '',
          status: '启用',
          created_ts: '2024-01-02'
        }],
      userContent: {
        id: '',
        username: '',
        email: '',
        phone: '',
        status: '',
        created_ts: ''
      },
      userStatus: [{
        value: '选项1',
        label: '启用'
      }, {
        value: '选项2',
        label: '禁用'
      }],
      queryParams: {
        page: 1,
        page_size: 10,
        id: undefined,
        username: undefined,
        email: undefined,
        phone: undefined,
        status: undefined,
        created_after_ts: undefined,
        created_before_ts: undefined
      },
      rules: {
        username: [
          { required: true, message: '请输入用户账号', trigger: 'blur' },
          {

            trigger: 'blur',
            message: '只能输入5-20个的字符串'
          }
        ],
        email: [
          { required: true, trigger: 'blur', message: '请输入邮箱' },
          { type: 'email', trigger: 'blur', message: '请输入正确的邮箱地址' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            pattern: /^1[2|3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
      }
    }
  },

  mounted() {
    this.getUserList()
  },
  methods: {
    getUserList() {
      const storedUsers = localStorage.getItem('userList')
      this.userList = storedUsers ? JSON.parse(storedUsers) : this.defaultUserList
    },
    reset() {
      this.form = {
        id: undefined,
        username: undefined,
        phone: undefined,
        sex: this.defaultSexValue,
        status: this.defaultStatusValue,
        email: undefined,
        is_activate: true,
        roles: undefined,
        avatar: this.defaultAvatar
      }
      this.resetForm('form')
    },
    resetQuery() {
      this.queryParams = {
        // page: 1,
        // page_size: 10,
        id: undefined,
        username: undefined,
        email: undefined,
        phone: undefined,
        status: undefined,
        created_after_ts: undefined,
        created_before_ts: undefined
      }
      this.dateRange = []
    },
    handleQuery() {
      console.log(1)
    },
    handleAdd() {
      this.dialogType = 'new'
      this.dialogVisible = true
    },

    confirmUser() {
      const isEdit = this.dialogType === 'edit'
      console.log(this.userContent)

      if (isEdit) {
        const index = this.userList.findIndex(user => user.userId === this.userContent.userId)
        if (index !== -1) {
          this.$set(this.userList, index, { ...this.userContent })
        }
      } else {
        this.userList.push(this.userContent)
      }
      localStorage.setItem('userList', JSON.stringify(this.userList))
      this.dialogVisible = false
      this.resetUser()
    },

    resetUser() {
      this.userContent = {
        id: '',
        username: '',
        email: '',
        phone: '',
        status: '',
        created_ts: ''
      }
    },
    handelUserCancel() {
      this.dialogVisible = false
      this.resetUser()
    },
    handleClose() {
      this.dialogVisible = false
      this.resetUser()
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true
      this.userContent = deepClone(scope.row)
    },
    handleDelete({ $index, row }) {
      this.$confirm('确认删除这条数据', 'warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          this.userList.splice($index, 1)
          localStorage.setItem('userList', JSON.stringify(this.userList))
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
        .catch(err => { console.error(err) })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  // height:calc(100vh - 50px);
  // background-color: #f0f2f5;
  .user-search{
    background-color: #fff;
  }
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
